<template>
  <div class="end-dialog-content">
    <div class="nianhua">
      <img src="./../assets/imgs/catch-result/img_01.png" alt="" class="yanhua1">
      <img src="./../assets/imgs/catch-result/img_01.png" alt="" class="yanhua2">
      <div class="head">
        <h3>明天再来挑战吧！</h3>
        <h4>今天你的抽奖次数已经用完了哦~</h4>
      </div>
      <p>邀请朋友一起参加吧!</p>
      <div class="jiantou">
        <img src="./../assets/imgs/end/img_01.png">
      </div>
      <div class="share-btn">
        <img src="./../assets/imgs/end/img_02.png" @click="share" class="heartbeat"> 
      </div>

    </div>
    <div class="close">
      <img src="./../assets/imgs/close-btn.png" @click="close">
    </div>
  </div>
</template>
<script>


export default {
  name: "end",
  components:{
    
  },
  data () {
    return {
  
    };
  },
  computed:{
 
  },
  mounted(){
 
  },
  methods:{
    close(){
      this.$emit('close')
      this.$router.push({path:'/'})
    },
    share(){
      this.$emit('share')
    },
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common.scss';
.end-dialog-content{
  padding-top: px2rem(60);
  text-align: center;
  position: relative;
  .nianhua{
    background-image: url('./../assets/imgs/end/img_03.png');
    height: px2rem(740);
    width: 90%;
    margin: 0 auto;
    @include bg-img();
    .yanhua1{
      position: absolute;
      top:px2rem(260);
      left:px2rem(80);
      transform: scale(.4);
    }
    .yanhua2{
      position: absolute;
      top:px2rem(500);
      right:-1%;
      transform: scale(.6);
    }
    .head{
      padding-top: px2rem(300);
      letter-spacing: 2px;
      h3{
        @include font-dpr(32px);
        margin:0;
        padding: px2rem(20) 0;
      }
      h4{
        @include font-dpr(24px);
        margin:0;
        margin-bottom: px2rem(30);
      }
    }
    p{
      display: inline-block;
      margin: 0 auto;
      background-image: url('./../assets/imgs/nianhua-head.png');
      @include bg-img();
      @include font-dpr(28px);
      padding: 0 px2rem(20);
      height: px2rem(46);
      line-height: px2rem(46);
    }
    .jiantou{
      padding: px2rem(14) 0;
      img{
        width: px2rem(30);
      }
    }
    .share-btn{
      img{
        height:px2rem(86);
      }
    }
  }
  .close{
    margin-top: px2rem(32);
    img{
      height: px2rem(80);
    }
  }
  .hand-img{
    bottom: px2rem(160);
  }
}
</style>